<template>
  <div id="app">
    <router-view />
    <!-- 自动退出警告弹窗 -->
    <el-dialog title="会话即将过期" :visible.sync="showWarningDialog" :close-on-click-modal="false" :close-on-press-escape="false" :width="`${400 * $f}px`" center :append-to-body="true">
      <div class="warning-content">
        <p>
          您的会话将在
          <span class="countdown-seconds">{{ countdownSeconds }}</span>
          秒后自动退出
        </p>
        <p>请进行任意鼠标或键盘操作以保持登录状态</p>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Vue from 'vue';
export default {
  data() {
    return {
      inactivityTimer: null,
      warningTimer: null, // 用于处理提前1分钟警告的定时器
      countdownTimer: null, // 用于倒计时显示的定时器
      countdownSeconds: 60, // 倒计时秒数
      sessionTimeout: 3600000, // 1小时 = 3600000毫秒
      warningTime: 60000, // 提前1分钟警告 = 60000毫秒
      showWarningDialog: false // 控制警告弹窗显示
    };
  },
  created() {
    this.addScript('webview');
    this.setFontSize(document, window);
  },
  mounted() {
    // 添加所有用户活动事件监听
    window.addEventListener('mousemove', this.resetTimer);
    window.addEventListener('keypress', this.resetTimer);
    window.addEventListener('click', this.resetTimer);
    window.addEventListener('scroll', this.resetTimer);
    // 如果没有lastActivityTime，创建一个
    if (!localStorage.getItem('lastActivityTime')) {
      localStorage.setItem('lastActivityTime', new Date().getTime());
    }
    // 初始化计时器
    this.initInactivityTimer();
    // 监听自定义事件
    this.$bus.$on('timeLogout', this.initInactivityTimer);
  },
  // 组件销毁前清理资源
  beforeDestroy() {
    // 清除所有定时器
    this.clearAllTimers();
  },
  methods: {
    initInactivityTimer() {
      // 清除旧定时器防止重复
      this.clearAllTimers();
      // 计算剩余时间
      const lastActivityTimeStr = localStorage.getItem('lastActivityTime');
      let lastTime = lastActivityTimeStr ? parseInt(lastActivityTimeStr) : new Date().getTime();
      // 如果解析失败，使用当前时间作为默认值
      if (isNaN(lastTime)) {
        lastTime = new Date().getTime();
        localStorage.setItem('lastActivityTime', lastTime);
      }
      const currentTime = new Date().getTime();
      const remainingTime = this.sessionTimeout - (currentTime - lastTime);
      // 确保剩余时间不为负数
      if (remainingTime <= 0) {
        // 如果已经超时，立即执行退出操作
        this.handleLogout();
        return;
      }
      // 如果剩余时间小于等于警告时间，直接显示警告
      if (remainingTime <= this.warningTime) {
        this.showWarning();
        return;
      }
      // 设置警告定时器，在距离超时还有1分钟时触发警告
      this.warningTimer = setTimeout(() => {
        this.showWarning();
      }, remainingTime - this.warningTime);
    },
    // 清除所有定时器
    clearAllTimers() {
      if (this.inactivityTimer) {
        clearTimeout(this.inactivityTimer);
        this.inactivityTimer = null;
      }
      if (this.warningTimer) {
        clearTimeout(this.warningTimer);
        this.warningTimer = null;
      }
      if (this.countdownTimer) {
        clearInterval(this.countdownTimer);
        this.countdownTimer = null;
      }
    },
    // 显示警告弹窗并开始倒计时
    showWarning() {
      // 确保上一个倒计时已清除
      if (this.countdownTimer) {
        clearInterval(this.countdownTimer);
      }
      // 重置倒计时秒数
      this.countdownSeconds = 60;
      // 显示警告弹窗
      this.showWarningDialog = true;
      // 开始倒计时
      this.startCountdown();
    },
    // 开始倒计时
    startCountdown() {
      this.countdownTimer = setInterval(() => {
        this.countdownSeconds--;
        // 倒计时结束，执行退出登录
        if (this.countdownSeconds <= 0) {
          this.handleLogout();
        }
      }, 1000);
    },
    // 统一处理退出登录逻辑
    handleLogout() {
      // 清除所有定时器
      this.clearAllTimers();
      // 关闭警告弹窗
      this.showWarningDialog = false;
      // 清除token和存储数据
      localStorage.removeItem('token');
      localStorage.removeItem('lastActivityTime');
      // 跳转到登录页
      this.$router.push('/login');
    },
    resetTimer() {
      // 更新用户活动时间
      localStorage.setItem('lastActivityTime', new Date().getTime());
      // 如果警告弹窗已显示，关闭它
      if (this.showWarningDialog) {
        this.showWarningDialog = false;
        // 清除倒计时定时器
        if (this.countdownTimer) {
          clearInterval(this.countdownTimer);
          this.countdownTimer = null;
        }
      }
      // 重置计时器
      this.initInactivityTimer();
    },
    addScript(name) {
      let head = document.getElementsByTagName('head')[0];
      let script = document.createElement('script');
      script.type = 'text/javascript';
      script.onload = script.onreadystatechange = () => {
        if (name === 'webview') {
          // console.log('uni', uni) //eslint-disable-line
        }
      };
      script.src = `/static/js/${name}.js`;
      head.appendChild(script);
    },
    setFontSize(doc, win) {
      let docEl = doc.documentElement;
      let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
      let reCaculate = function() {
        let clientWidth = docEl.clientWidth;
        if (!clientWidth) {
          return;
        }
        docEl.style.fontSize = 16 * (clientWidth / 1920) + 'px';
        Vue.prototype.$f = clientWidth / 1920;
      };
      // 立即执行一次计算
      reCaculate();
      // 确保事件监听器正确添加
      if (win.addEventListener) {
        // 使用passive: false确保在某些浏览器中能正常工作
        win.addEventListener(resizeEvt, reCaculate, { passive: false });
        // 为了更好的响应性，同时监听resize和orientationchange事件
        if ('orientationchange' in window) {
          win.addEventListener('orientationchange', reCaculate, { passive: false });
        }
      }
      if (doc.addEventListener) {
        doc.addEventListener('DOMContentLoaded', reCaculate, false);
      }
    }
  }
};
</script>
<style lang="less" scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  color: #2c3e50;
  height: 100%;
  background: #f2f5f8;
}
/* 警告弹窗样式 */
.warning-content {
  text-align: center;
  color: #606266;
}
.warning-content p {
  margin-bottom: 10px;
  font-size: 14px;
}
.countdown-seconds {
  color: #f56c6c;
  font-size: 24px;
  font-weight: bold;
  margin: 0 5px;
}
</style>
